<template>
  <div style="margin-left: 10%;">
    <div style="padding: 10px 5%;  width: 80%; height: 85vh; background-color: #fafafa; border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.14);">
      <div style="border-radius: 50%; width: 150px; height: 150px; margin: 10px 0 0 45%; border: 1px solid #e5e9ef;">
        <div>
          <el-image
              class="userimg"
              :src="'http://localhost:8081/api/files/' + user.img"
              :preview-src-list="['http://localhost:8081/api/files/' + user.img]">
          </el-image>
        </div>
        <div class="changeuserface">
          <el-upload action="http://localhost:8081/api/files/upload" :on-success="successUpload" :show-file-list="false">
            <span class="change">更换头像</span>
          </el-upload>

        </div>
      </div>

      <div style="width: 90%; height: 25%; margin-left: 5%; padding: 20px 0 0 20%; margin-top: 5px;">
        <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign" class="custom-label">
         <!--用户名称-->
          <el-form-item label="用户名称" style="text-align: left; margin-top: 5px; padding-top: 10px;">
            <el-input v-model="user.username" style="width: 60%;" disabled></el-input>
            <el-button type="danger" style="margin-left: 10px;" @click="deleteuser">用户注销</el-button>
          </el-form-item>
          <!--用户密码-->
          <el-form-item label="用户密码" style="text-align: left; padding-top: 10px;">
            <el-input type="password" v-model="user.password" style="width: 60%;" show-password disabled></el-input>
            <el-button type="primary" style="margin-left: 10px;">修改密码</el-button>
          </el-form-item>
          <!--用户邮箱-->
          <el-form-item label="电子邮箱" style="text-align: left; padding-top: 10px;">
            <el-input v-model="user.email" style="width: 60%;" disabled></el-input>
            <el-button type="primary" style="margin-left: 10px;">修改邮箱</el-button>
          </el-form-item>
          <!--用户余额-->
          <el-form-item label="账户余额" style="text-align: left; padding-top: 10px;">
            <el-input v-model="user.coin" style="width: 60%;" disabled></el-input>
            <el-button type="primary" style="margin-left: 10px;">余额充值</el-button>
          </el-form-item>


        </el-form>
      </div>

    </div>

  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name:"businessselfview",
  data() {
    return {
      user:sessionStorage.getItem("user")? JSON.parse(sessionStorage.getItem("user")):{},
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      }
    };
  },
  created() {
    this.reloaduser();
  },
  methods: {
    successUpload(res) {
      this.user.img = res.data;
      request.post("/user/updateimg", this.user).then(res => {
        if (res.code === '0') {
          this.$message({
            message: '头像更换成功',
            type: 'success'
          });
          this.reloaduser();
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          });
        }
      })
    },
    deleteuser(){
      request.post("user/deleteUser/" + this.user.userId).then(res => {
        if (res.code === '0') {
          this.$message.success("用户注销成功")
          sessionStorage.removeItem("user");
          this.$router.push("/loginview")
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    reloaduser(){
      request.post("/user/reloaduser",this.user).then(res => {
        if (res.code === '0') {
          sessionStorage.setItem("user",JSON.stringify(res.data));
        } else {
          this.$message.error(res.msg);
        }
      })
    }
  }
}
</script>

<style>

.custom-label {
  .el-form-item__label {
    font-size: 16px;
    font-weight: bold;
  }
}

.userimg {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 14%;
  left: -5%;
  margin: 23px 0 0 17px;
}

.changeuserface {
  width: 54px;
  height: 54px;
  position: absolute;
  left: 57%;
  top: 17%;
  margin-left: -3px;
  border-radius: 50%;
  border: 1px solid #e5e9ef;
  background-color: rgba(55, 133, 208, 0.5);
}

.change {
  width: 2em;
  position: absolute;
  font-size: 14px;
  font-weight: bold;
  margin-left: -13px;
  margin-top: -10px;
}



</style>